<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-divider v-if="perms.length > 0">商家</van-divider>
    <van-grid :column-num="2">
      <van-grid-item
        class="grid-color"
        :icon="item.icon || 'label-o'"
        v-for="item in perms"
        :key="item.id"
        :text="item.name"
        :to="{ name: item.path }"
      />
    </van-grid>
    <van-divider v-if="admin_perms.length > 0">管理人员</van-divider>
    <van-grid :column-num="2">
      <van-grid-item
        class="grid-color"
        :icon="item.icon || 'label-o'"
        v-for="item in admin_perms"
        :key="item.id"
        :text="item.name"
        :to="{ name: item.path }"
      />
    </van-grid>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";

import { getWxRolePermission, getWxAdminPermission } from "@/api/member";

export default {
  name: "DashBoard",
  components: {
    NavBar,
  },
  props: ["retailer_id"],
  computed: {
    ...mapGetters(["employee"]),
  },

  data() {
    return {
      title: this.$route.meta.title,

      perms: [],
      admin_perms: [],
    };
  },
  mounted() {
    this.getPermissions();
    this.getAdminPermissions();
  },
  methods: {
    getPermissions() {
      getWxRolePermission()
        .then((res) => {
          this.perms = res.data;
        })
        .catch((error) => {
          console.log(error);
          this.$toast("获取权限错误!");
        });
    },

    getAdminPermissions() {
      getWxAdminPermission()
        .then((res) => {
          this.admin_perms = res.data;
        })
        .catch((error) => {
          console.log(error);
          this.$toast("获取管理权限错误!");
        });
    },
  },
};
</script>

<style  scoped>
.grid-color {
  color: #1989fa;
}
.van-divider {
  margin: 0;
  border-color: #1989fa;
}
</style>